/* 学习目标：React创建元素-h1标签显示到浏览器中  */
// 语法:  React.createElement('标签的类型', {标签的属性名: 值}, '标签的内容')
// 语法: root.render(React元素-虚拟dom)

// 1. 导入两个包 React 和ReactDOM
import React from 'react';
import ReactDOM from 'react-dom/client';
// React ： 创建虚拟DOM
// ReactDOM： 渲染虚拟DOM
// 💥💥 写死， 创建一个根容器
const root = ReactDOM.createRoot(document.querySelector('#root'))

// 2. React创建一个h1标签
const h1Node = React.createElement('b', {id: 'box', title: 'hello 84'}, 'hello React')
// 虚拟DOM - 不能直接渲染
console.log('h1Node  ----->  ', h1Node);


// 3. 通过render方法，渲染到指定界面
root.render(h1Node)
